<html>
<head>
	<title>Heirlooms</title>

	<link rel="stylesheet" href="bootstrap.css" />
	<link rel="stylesheet" href="icomoon.css" />
	<link rel="stylesheet" href="index.css" />
	<link rel="icon" type="image/ico" sizes="16x16" href="favicon.ico">
</head>

<body>
	<div id="heirloomPopup"></div>
	<div id="content-text">
		Paste your save into the box below to get recommendations for heirloom upgrades.
		<div class="help">
			<p>Currently the only mods this will recommend upgrading are Trimp Attack, Crit Chance, Crit Damage, Plaguebringer, Void Map Drop Chance, Gamma Burst, Fluffy Exp, Miner Efficiency, Parity Power, and every core mod. (also Trimp Health/Prismatic/Inequality in U2) If you have other useful mods on your heirlooms (such as Explorer Efficiency or Fragment Drop Rate), you'll have to upgrade them based on feel, as they're very difficult to weigh.
				<br><br>
				Additionally, this will not recommend replacing mods with stronger ones, nor adding mods in empty slots, nor equipping a better heirloom from your carried ones, nor saving spirestones for additional floors. But you probably shouldn't spend spirestones until you have a quite a few floors, or have a replacement core so you can recycle your current to afford the next floor.
				<br><br>
				To the right of the inputs, you'll see your inventory of carried heirlooms. To weigh mods using one of these heirlooms rather than your currently equipped heirloom, click on the one you'd like to weigh. To go back to your equipped heirloom, click on your currently selected heirloom to unselect it. You can also hover over the heirlooms in your inventory to view them.
				<br><br>
				VM weight, XP weight, and HP weight are multipliers to the value of the Void Map Drop Chance, Fluffy Exp, and Trimp Health/Breed Speed mods respectively. So if your next VMDC upgrade were to increase your value by 0.5%, the default weight of 12 will multiply it by 12 so it will be calculated as if it were to increase your value by 6%. The default weights (12/11.25) are used to provide a good balance between damage and helium/exp gain.
				<br><br>
				Weapon levels is the average number of weapon levels (not prestiges) you have on each weapon by the end of your run.
				<br><br>
				Daily crit chance bonus is the % bonus to crit chance you'll have from your daily. Please note that unless you're making a shield for a specific daily, you should leave this at 0.
			</p>
		</div>
	</div>
	<div id="content">
		<div id="inputsContainer">
			<div style="display: flex; flex-direction: column;">
				<textarea placeholder="Paste your save here" id="saveInput" spellcheck="false" autocomplete="off" onfocus="this.value = ''" oninput="calculate()"></textarea>
				<button id="calculateButton" onclick="calculate()">Calculate upgrades</button>
				<div>
					<input placeholder="VM weight (12)" id="VMWeightInput" type="number" spellcheck="false" autocomplete="off" oninput="updateInput('VMWeight')"></input>
					<input placeholder="XP weight (11.25)" id="XPWeightInput" type="number" spellcheck="false" autocomplete="off" oninput="updateInput('XPWeight')"></input>
					<input placeholder="HP weight (0)" id="HPWeightInput" type="number" spellcheck="false" autocomplete="off" oninput="updateInput('HPWeight')"></input>
				</div>
				<div>
					<input placeholder="Weapon levels (90)" id="weaponLevelsInput" type="number" spellcheck="false" autocomplete="off" oninput="updateInput('weaponLevels')"></input>
					<input placeholder="Daily crit chance bonus (0)" id="dailyCritInput" type="number" spellcheck="false" autocomplete="off" oninput="updateInput('dailyCrit')"></input>
				</div>
				<div id="equalityTargetInputContainer" style="display: none;">
					<input placeholder="Equality target (100)" id="equalityTargetInput" type="number" spellcheck="false" autocomplete="off" oninput="updateInput('equalityTarget')"></input>
				</div>
				<div id="fluffyCheckboxesContainer" class="checkboxesContainer" style="display: none;">
					<div class="checkboxContainer">
						Fluffy E4L10:
						<input id="fluffyE4L10Input" type="checkbox" onchange="updateInput('fluffyE4L10')">
					</div>
					<div class="checkboxContainer">
						Fluffy E5L10:
						<input id="fluffyE5L10Input" type="checkbox" onchange="updateInput('fluffyE5L10')">
					</div>
				</div>
				<div id="scruffyCheckboxesContainer" class="checkboxesContainer" style="display: none; flex-direction: column; height: 3.5rem;">
					<div style="display: flex; flex-direction: row;">
						<div class="checkboxContainer">
							Scruffy L2:
							<input id="scruffyL2Input" type="checkbox" onchange="updateInput('scruffyL2')">
						</div>
						<div class="checkboxContainer">
							Scruffy L3:
							<input id="scruffyL3Input" type="checkbox" onchange="updateInput('scruffyL3')">
						</div>
						<div class="checkboxContainer">
							Scruffy L7:
							<input id="scruffyL7Input" type="checkbox" onchange="updateInput('scruffyL7')">
						</div>
					</div>
					<div style="display: flex; flex-direction: row;">
						<div class="checkboxContainer">
							Scruffy L12:
							<input id="scruffyL12Input" type="checkbox" onchange="updateInput('scruffyL12')">
						</div>
						<div class="checkboxContainer">
							Scruffy L13:
							<input id="scruffyL13Input" type="checkbox" onchange="updateInput('scruffyL13')">
						</div>
						<div class="checkboxContainer">
							Scruffy L15:
							<input id="scruffyL15Input" type="checkbox" onchange="updateInput('scruffyL15')">
						</div>
					</div>
				</div>
				<div class="checkboxesContainer">
					<div id="universe2CheckboxContainer" class="checkboxContainer" style="display: none;">
						In Universe 2:
						<input id="universe2Input" type="checkbox" onchange="updateInput('universe2')">
					</div>
					<div id="chargedCritsCheckboxContainer" class="checkboxContainer">
						Charged Crits:
						<input id="chargedCritsInput" type="checkbox" onchange="updateInput('chargedCrits')">
					</div>
				</div>
			</div>
			<div id="nextUpgradesContainer" class="nextUpgradesContainer">
				You have ??? Nullifium.
				<br>
				Your next upgrades should be ??? at ??? more Nullifium, and ??? at ??? more Nullifium.
			</div>
		</div>
		<div id="heirloomInventory" class="heirloomContainer">
			<div id="inventoryColumn1"></div>
			<div id="inventoryColumn2"></div>
		</div>
	</div>
	<div style="display: flex; flex-direction: row;">
		<div id="shieldOldContainer" class="heirloomContainer">
			<div class="heirloomContainerTopRow">
				<div class="heirloomIconContainer">
					<span id="shieldOldIcon" class="icomoon icon-shield3"></span>
				</div>
				<div>
					<span class="heirloomName" id="shieldOldName">???</span>
				</div>
			</div>
			<div class="heirloomSpentContainer">
				<span class="heirloomEquipped" id="shieldOldEquipped">Equipped</span>
				<span class="heirloomSpent" id="shieldOldSpent">??? / ??? Nu Spent</span>
			</div>
			<div class="?Container" style="z-index: 2;">
				<div class="help" id="shieldOld?">
					<p id="shieldOldInfo"></p>
				</div>
			</div>
			<div id="shieldOldModContainer0">
				<span id="shieldOldMod0Notification">•</span>
				<span id="shieldOldMod0" class="heirloomMod">???</span>
			</div>
			<div id="shieldOldModContainer1">
				<span id="shieldOldMod1Notification">•</span>
				<span id="shieldOldMod1" class="heirloomMod">???</span>
			</div>
			<div id="shieldOldModContainer2">
				<span id="shieldOldMod2Notification">•</span>
				<span id="shieldOldMod2" class="heirloomMod">???</span>
			</div>
			<div id="shieldOldModContainer3">
				<span id="shieldOldMod3Notification">•</span>
				<span id="shieldOldMod3" class="heirloomMod">???</span>
			</div>
			<div id="shieldOldModContainer4">
				<span id="shieldOldMod4Notification">•</span>
				<span id="shieldOldMod4" class="heirloomMod">???</span>
			</div>
			<div id="shieldOldModContainer5">
				<span id="shieldOldMod5Notification">•</span>
				<span id="shieldOldMod5" class="heirloomMod">???</span>
			</div>
			<div id="shieldOldModContainer6">
				<span id="shieldOldMod6Notification">•</span>
				<span id="shieldOldMod6" class="heirloomMod">???</span>
			</div>
			<div id="shieldOldInnate" class="heirloomInnate"></div>
		</div>
		<div id="staffOldContainer" class="heirloomContainer">
			<div class="heirloomContainerTopRow">
				<div class="heirloomIconContainer">
					<span id="staffOldIcon" class="glyphicon glyphicon-grain"></span>
				</div>
				<div>
					<span class="heirloomName" id="staffOldName">???</span>
				</div>
			</div>
			<div class="heirloomSpentContainer">
				<span class="heirloomEquipped" id="staffOldEquipped">Equipped</span>
				<span class="heirloomSpent" id="staffOldSpent">??? / ??? Nu Spent</span>
			</div>
			<div class="?Container" style="z-index: 3;">
				<div class="help" id="staffOld?">
					<p id="staffOldInfo"></p>
				</div>
			</div>
			<div id="staffOldModContainer0">
				<span id="staffOldMod0Notification">•</span>
				<span id="staffOldMod0" class="heirloomMod">???</span>
			</div>
			<div id="staffOldModContainer1">
				<span id="staffOldMod1Notification">•</span>
				<span id="staffOldMod1" class="heirloomMod">???</span>
			</div>
			<div id="staffOldModContainer2">
				<span id="staffOldMod2Notification">•</span>
				<span id="staffOldMod2" class="heirloomMod">???</span>
			</div>
			<div id="staffOldModContainer3">
				<span id="staffOldMod3Notification">•</span>
				<span id="staffOldMod3" class="heirloomMod">???</span>
			</div>
			<div id="staffOldModContainer4">
				<span id="staffOldMod4Notification">•</span>
				<span id="staffOldMod4" class="heirloomMod">???</span>
			</div>
			<div id="staffOldModContainer5">
				<span id="staffOldMod5Notification">•</span>
				<span id="staffOldMod5" class="heirloomMod">???</span>
			</div>
			<div id="staffOldModContainer6">
				<span id="staffOldMod6Notification">•</span>
				<span id="staffOldMod6" class="heirloomMod">???</span>
			</div>
			<div id="staffOldInnate" class="heirloomInnate"></div>
		</div>
		<div id="coreOldContainer" class="heirloomContainer" style="display: none">
			<div class="heirloomContainerTopRow">
				<div class="heirloomIconContainer">
					<span id="coreOldIcon" class="glyphicon glyphicon-adjust"></span>
				</div>
				<div>
					<span class="heirloomName" id="coreOldName">???</span>
				</div>
			</div>
			<div class="heirloomSpentContainer">
				<span class="heirloomEquipped" id="coreOldEquipped">Equipped</span>
				<span class="heirloomSpent" id="coreOldSpent">??? / ??? Ss Spent</span>
			</div>
			<div class="?Container" style="z-index: 2;">
				<div class="help" id="coreOld?">
					<p id="coreOldInfo"></p>
				</div>
			</div>
			<div id="coreOldModContainer0">
				<span id="coreOldMod0Notification">•</span>
				<span id="coreOldMod0" class="heirloomMod">???</span>
			</div>
			<div id="coreOldModContainer1">
				<span id="coreOldMod1Notification">•</span>
				<span id="coreOldMod1" class="heirloomMod">???</span>
			</div>
			<div id="coreOldModContainer2">
				<span id="coreOldMod2Notification">•</span>
				<span id="coreOldMod2" class="heirloomMod">???</span>
			</div>
			<div id="coreOldModContainer3">
				<span id="coreOldMod3Notification">•</span>
				<span id="coreOldMod3" class="heirloomMod">???</span>
			</div>
			<div id="coreOldModContainer4">
				<span id="coreOldMod4Notification">•</span>
				<span id="coreOldMod4" class="heirloomMod">???</span>
			</div>
			<div id="coreOldModContainer5">
				<span id="coreOldMod5Notification">•</span>
				<span id="coreOldMod5" class="heirloomMod">???</span>
			</div>
			<div id="coreOldModContainer6">
				<span id="coreOldMod6Notification">•</span>
				<span id="coreOldMod6" class="heirloomMod">???</span>
			</div>
		</div>
	</div>
	<div style="display: flex; flex-direction: row;">
		<div id="shieldNewContainer" class="heirloomContainer" style="opacity: 0;">
			<div class="heirloomContainerTopRow">
				<div class="heirloomIconContainer">
					<span id="shieldNewIcon" class="icomoon icon-shield3"></span>
				</div>
				<div>
					<span class="heirloomName" id="shieldNewName">???</span>
				</div>
			</div>
			<div class="heirloomSpentContainer">
				<span class="heirloomEquipped" id="shieldNewEquipped">Equipped</span>
				<span class="heirloomSpent" id="shieldNewSpent">??? / ??? Nu Spent</span>
			</div>
			<div class="?Container" style="z-index: 1;">
				<div class="help" id="shieldNew?">
					<p id="shieldNewInfo"></p>
				</div>
			</div>
			<div id="shieldNewModContainer0">
				<span id="shieldNewMod0Notification">•</span>
				<span id="shieldNewMod0" class="heirloomMod">???</span>
				<span id="shieldNewMod0Plus">+?</span>
			</div>
			<div id="shieldNewModContainer1">
				<span id="shieldNewMod1Notification">•</span>
				<span id="shieldNewMod1" class="heirloomMod">???</span>
				<span id="shieldNewMod1Plus">+?</span>
			</div>
			<div  id="shieldNewModContainer2">
				<span id="shieldNewMod2Notification">•</span>
				<span id="shieldNewMod2" class="heirloomMod">???</span>
				<span id="shieldNewMod2Plus">+?</span>
			</div>
			<div id="shieldNewModContainer3">
				<span id="shieldNewMod3Notification">•</span>
				<span id="shieldNewMod3" class="heirloomMod">???</span>
				<span id="shieldNewMod3Plus">+?</span>
			</div>
			<div id="shieldNewModContainer4">
				<span id="shieldNewMod4Notification">•</span>
				<span id="shieldNewMod4" class="heirloomMod">???</span>
				<span id="shieldNewMod4Plus">+?</span>
			</div>
			<div id="shieldNewModContainer5">
				<span id="shieldNewMod5Notification">•</span>
				<span id="shieldNewMod5" class="heirloomMod">???</span>
				<span id="shieldNewMod5Plus">+?</span>
			</div>
			<div id="shieldNewModContainer6">
				<span id="shieldNewMod6Notification">•</span>
				<span id="shieldNewMod6" class="heirloomMod">???</span>
				<span id="shieldNewMod6Plus">+?</span>
			</div>
			<div id="shieldNewInnate" class="heirloomInnate"></div>
		</div>
		<div id="staffNewContainer" class="heirloomContainer" style="opacity: 0;">
			<div class="heirloomContainerTopRow">
				<div class="heirloomIconContainer">
					<span id="staffNewIcon" class="glyphicon glyphicon-grain"></span>
				</div>
				<div>
					<span class="heirloomName" id="staffNewName">???</span>
				</div>
			</div>
			<div class="heirloomSpentContainer">
				<span class="heirloomEquipped" id="staffNewEquipped">Equipped</span>
				<span class="heirloomSpent" id="staffNewSpent">??? / ??? Nu Spent</span>
			</div>
			<div class="?Container" style="z-index: 2;">
				<div class="help" id="staffNew?">
					<p id="staffNewInfo"></p>
				</div>
			</div>
			<div id="staffNewModContainer0">
				<span id="staffNewMod0Notification">•</span>
				<span id="staffNewMod0" class="heirloomMod">???</span>
				<span id="staffNewMod0Plus">+?</span>
			</div>
			<div id="staffNewModContainer1">
				<span id="staffNewMod1Notification">•</span>
				<span id="staffNewMod1" class="heirloomMod">???</span>
				<span id="staffNewMod1Plus">+?</span>
			</div>
			<div id="staffNewModContainer2">
				<span id="staffNewMod2Notification">•</span>
				<span id="staffNewMod2" class="heirloomMod">???</span>
				<span id="staffNewMod2Plus">+?</span>
			</div>
			<div id="staffNewModContainer3">
				<span id="staffNewMod3Notification">•</span>
				<span id="staffNewMod3" class="heirloomMod">???</span>
				<span id="staffNewMod3Plus">+?</span>
			</div>
			<div id="staffNewModContainer4">
				<span id="staffNewMod4Notification">•</span>
				<span id="staffNewMod4" class="heirloomMod">???</span>
				<span id="staffNewMod4Plus">+?</span>
			</div>
			<div id="staffNewModContainer5">
				<span id="staffNewMod5Notification">•</span>
				<span id="staffNewMod5" class="heirloomMod">???</span>
				<span id="staffNewMod5Plus">+?</span>
			</div>
			<div id="staffNewModContainer6">
				<span id="staffNewMod6Notification">•</span>
				<span id="staffNewMod6" class="heirloomMod">???</span>
				<span id="staffNewMod6Plus">+?</span>
			</div>
			<div id="staffNewInnate" class="heirloomInnate"></div>
		</div>
		<div id="coreNewContainer" class="heirloomContainer" style="display: none;">
			<div class="heirloomContainerTopRow">
				<div class="heirloomIconContainer">
					<span id="coreNewIcon" class="glyphicon glyphicon-adjust"></span>
				</div>
				<div>
					<span class="heirloomName" id="coreNewName">???</span>
				</div>
			</div>
			<div class="heirloomSpentContainer">
				<span class="heirloomEquipped" id="coreNewEquipped">Equipped</span>
				<span class="heirloomSpent" id="coreNewSpent">??? / ??? Ss Spent</span>
			</div>
			<div class="?Container">
				<div class="help" id="coreNew?" style="z-index: 1;">
					<p id="coreNewInfo"></p>
				</div>
			</div>
			<div id="coreNewModContainer0">
				<span id="coreNewMod0Notification">•</span>
				<span id="coreNewMod0" class="heirloomMod">???</span>
				<span id="coreNewMod0Plus">+?</span>
			</div>
			<div id="coreNewModContainer1">
				<span id="coreNewMod1Notification">•</span>
				<span id="coreNewMod1" class="heirloomMod">???</span>
				<span id="coreNewMod1Plus">+?</span>
			</div>
			<div id="coreNewModContainer2">
				<span id="coreNewMod2Notification">•</span>
				<span id="coreNewMod2" class="heirloomMod">???</span>
				<span id="coreNewMod2Plus">+?</span>
			</div>
			<div id="coreNewModContainer3">
				<span id="coreNewMod3Notification">•</span>
				<span id="coreNewMod3" class="heirloomMod">???</span>
				<span id="coreNewMod3Plus">+?</span>
			</div>
			<div id="coreNewModContainer4">
				<span id="coreNewMod4Notification">•</span>
				<span id="coreNewMod4" class="heirloomMod">???</span>
				<span id="coreNewMod4Plus">+?</span>
			</div>
			<div id="coreNewModContainer5">
				<span id="coreNewMod5Notification">•</span>
				<span id="coreNewMod5" class="heirloomMod">???</span>
				<span id="coreNewMod5Plus">+?</span>
			</div>
			<div id="coreNewModContainer6">
				<span id="coreNewMod6Notification">•</span>
				<span id="coreNewMod6" class="heirloomMod">???</span>
				<span id="coreNewMod6Plus">+?</span>
			</div>
		</div>
	</div>

	<footer id="footer">
		<a href="https://omsi6.github.io/heirlooms/index.js" style="text-decoration: underline">Heirlooms v<span id="versionNumber">0.00</span></a>
	</footer>

	<script src="lz-string.min.js"></script>
	<script src="tdcalc.js"></script>
	<script src="index.js"></script>
</body>
</html>